import './CustormService.less'
import {Card, Button, Table, Popconfirm, message, Tag, Pagination} from 'antd';
import {Link, Outlet} from 'react-router-dom';
import http from "../../utils/http";
import React,{useState,useEffect} from 'react'
import CreateServiceModal from "../../components/CustomerService/createServiceModal/createServiceModal";
const CustormServer = ()=>{
    const [recordData,setRecordData] = useState({});
    const [isShow,setIsShow] = useState(false);
    const [tableData,setTableData] = useState([]);
    const [page,setPage] = useState(1);
    const [pageSize,setPageSize] = useState(5);
    const [total,setTotal] = useState(0);

    useEffect(()=> {
        getTableData()
    },[page])
    const columns = [
        { title: '#',
            dataIndex: 'id',
            key: 'id',
            align:'center'
        },
        { title: '客服名称',
            dataIndex: 'name',
            key: 'name',
            align:'center'
        },
        { title: '联系方式',
            dataIndex: 'phone',
            key: 'phone',
            align:'center'
        },
        { title: '创建时间',
            dataIndex: 'creationTime',
            key: 'creationTime',
            align:'center',
            render:(text,record)=>(<span>{record.creationTime.substring(0,10) + ' '}{record.creationTime.substring(11,19)}</span>)
        },
        { title: '绑定号码',
            dataIndex: 'adminphone',
            key:'adminphone',
            align:'center'
        },
        { title: '绑定账号',
            dataIndex: 'account',
            key: 'account',
            align:'center'
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
            align:'center',
            render:(text,record)=>{
                if(record.state) return (<Tag color="green">{'启用'}</Tag>)
                else return (<Tag color="#ff3131">{'禁用'}</Tag>)
            }
        },
        {
            title: '操作',
            key: 'operation',
            align:'center',
            //render开始挂载渲染
            render: (text,record) => (
                <div>
                    <Button type={'link'} onClick={openEditModal.bind(this,record)}>编辑</Button>
                    <Popconfirm
                        title="确定删除吗？"
                        onConfirm={deleteData.bind(this,record.id)}
                        okText="删除"
                        cancelText="取消"
                    >
                        <Button type={'link'} style={{color:'red'}}>删除</Button>
                    </Popconfirm>
                </div>
            )
        },
    ];

    const getTableData = () => {
        http({
            url: 'api/staff/selectAllStaff',
            method: 'POST',
            data: {
                page: page,
                size: pageSize,
            }
        }).then((res) => {
            if(res.code == 1) {
                setTableData(res.data)
                setTotal(res.amount);
            }
            console.log(res)
        })
    }

    const openEditModal = (record) => {
        setRecordData(record);
        setIsShow(true);
    }
    const closeEditModal = () => {
        setIsShow(false);
    }
    const deleteData = (id) => {
        http({
            url:'api/staff/deleteStaff',
            method:'post',
            data:{id:id}
        }).then(res=>{
            if (res.code == 1){
                message.success(res.msg);
                getTableData();
            }else {
                message.error(res.msg);
            }
        })
    }
    const onChangePage = (page) =>{
        setPage(parseInt(page));
    }
    return(
        <Card className="CS-Card" >
            <div className={'CS-card'}>
                <div style={{width:'100%'}}>
                    <div className='CS-button' >
                        <Link to="/home/custormerservice/createlevel"><Button type="primary">创建客服</Button></Link>
                    </div>
                    <div className='CS-table'>
                        <Table columns={columns} dataSource={tableData}  pagination={false} />
                    </div>
                </div>
                <div>
                    <Pagination hideOnSinglePage current={page} defaultPageSize={pageSize} onChange={onChangePage} total={total} />
                </div>
            </div>
            <CreateServiceModal isShow={isShow} close={closeEditModal} data={recordData}/>
        </Card>
    )
}

export default CustormServer;